<!--
   110报警信息(指挥) | 110报警信息(情报)
 * @Author: zhanbh
 * @Date: 2021-04-08 10:46:41
 * @project: 天津YQ平台
-->
<template>
  <div class="info-110">
    <el-form ref="form" label-width="80px">
      <div class="table-filter table-filter-home">
        <div>
          <el-form-item label="报警时间:">
            <el-date-picker
              v-model="condition.bjsj.value"
              clearable
              type="datetimerange"
              value-format="yyyyMMddHHmmss"
              format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00']"
            />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="研判状态:">
            <div class="check-box">
              <el-checkbox :indeterminate="isImmerYP" v-model="checkAllYP" @change="onAllCheck('BM_YPZT', 'checkedYP')">
                全选
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedYP"
                @change="onEachCheck('BM_YPZT', 'checkedYP', 'checkAllYP', 'isImmerYP')"
              >
                <el-checkbox v-for="item in constant.BM_YPZT" :label="item.value" :key="item.value">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </div>
        <div></div>
        <div>
          <el-form-item label="关键词:">
            <el-input v-model="condition.keyword.value" placeholder="报警电话、报警人姓名、报警内容、案发地址" clearable />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="请求状态:">
            <div class="check-box">
              <el-checkbox :indeterminate="isImmerXF" v-model="checkAllXF" @change="onAllCheck('BM_XFZT', 'checkedXF')">
                全选
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedXF"
                @change="onEachCheck('BM_XFZT', 'checkedXF', 'checkAllXF', 'isImmerXF')"
              >
                <el-checkbox v-for="item in constant.BM_XFZT" :label="item.value" :key="item.value">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </div>
        <div>
          <el-form-item class="operate-btns">
            <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询 </el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="info-110__list">
      <comm-table
        ref="table"
        :condition="condition"
        :columns="columns"
        url="/v1/jqxx/search"
        :defaultSort="{
          prop: 'bjsj',
          order: 'descending'
        }"
      >
        <template slot-scope="{ row }">
          <div v-if="xfStatus === 'qqypXfzt'">
            <el-button
              type="text"
              v-permission="['JQXX_QQYP']"
              @click="() => $router.push({ name: 'PoliceCommandJudge', params: { id: row.id, zlly: '1' } })"
            >
              请求研判
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              v-permission="['JQXX_SCSPD']"
              type="text"
              @click="() => $router.push({name:'PoliceCommandForm',params:{jqid:row.id} })"
            >
              生成呈批单
            </el-button>
          </div>
          <div v-else>
            <el-button
              v-permission="['JQXX_YP']"
              type="text"
              @click="() => $router.push({ name:'PoliceJudge',params:{id:row.id} })"
            >
              研判
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              v-permission="['JQXX_YPZL']"
              @click="() => $router.push({name:'PoliceNewsJudgeOrder',params:{id:row.id,zlly:'2'} })"
            >
              研判指令
            </el-button>
          </div>
        </template>
      </comm-table>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { deepClone } from '@/utils/common';
import { BM_YPZT } from '@/common/codeDic';
export default {
  name: 'PoliceHome',
  props: {
    xfStatus: {
      type: String,
      default: 'qqypXfzt'
    }
  },
  data() {
    return {
      checkedYP: [],
      isImmerYP: false,
      checkAllYP: false,
      checkedXF: [],
      isImmerXF: false,
      checkAllXF: false,
      cloneCondition: null,
      columns: [
        { label: '序号', type: 'index' },
        { label: '报警时间', prop: 'bjsj', width: 180 },
        { label: '报警电话', prop: 'bjdh' },
        { label: '报警人姓名', prop: 'bjr' },
        {
          label: '报警内容',
          prop: 'title',
          render: (h, row) => {
            const _this = this;
            const routeName = {
              PoliceCommandHome: 'PoliceCommandDetail',
              PoliceNewsHome: 'PoliceNewsDetail'
            };
            return h(
              'div',
              {
                class: 'v-link',
                on: {
                  click() {
                    // 隐藏tooltip(由于不自动消失)
                    $('.el-tooltip__popper').css('display', 'none');
                    _this.$router.push({ name: routeName[_this.$route.name], params: { id: row.id } });
                  }
                }
              },
              row.bjnr
            );
          }
        },
        { label: '发案地址', prop: 'afdz' },
        {
          label: '请求状态',
          render: (h, row) => {
            return h('span', {}, row[this.xfStatus] === '0' ? '未请求' : '已请求');
          }
        },
        { label: '研判状态', prop: 'ypzt', code: BM_YPZT },
        { label: '操作', type: 'operate', width: 200 }
      ],
      condition: {
        bjsj: {
          value: [],
          op: 'rangeDate'
        },
        keyword: {
          value: '',
          op: 'like'
        },
        ypzt: {
          value: '',
          op: 'in'
        },
        // 指挥菜单的请求状态
        qqyp_Xfzt: {
          value: '',
          op: 'in'
        },
        // 情报菜单的请求状态
        ypzl_Xfzt: {
          value: '',
          op: 'in'
        },
      }
    };
  },
  computed: {
    ...mapState(['constant'])
  },
  watch: {
    checkedXF(val) {
      if(this.xfStatus=='qqypXfzt'){
      this.condition.qqyp_Xfzt.value = val.map((v) => v).join();
      }else{
      this.condition.ypzl_Xfzt.value = val.map((v) => v).join();
      }
    },
    checkedYP(val) {
      this.condition.ypzt.value = val.map((v) => v).join();
    }
  },
  mounted() {
    this.$store.dispatch('getConstant', ['BM_YPZT']);
    this.$set(this.condition, this.xfStatus, { value: '', op: 'in' });
    this.cloneCondition = deepClone(this.condition);
  },
  methods: {
    reset() {
      this.checkedXF = [];
      this.checkedYP = [];
      this.isImmerXF = false;
      this.isImmerYP = false;
      this.checkAllXF = false;
      this.checkAllYP = false;
      this.condition = deepClone(this.cloneCondition);
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    },
    onAllCheck(constant, checked) {
      if (this.constant[constant].length === this[checked].length) {
        this[checked] = [];
      } else {
        this[checked] = this.constant[constant].map((v) => v.value);
      }
    },
    onEachCheck(constant, checked, all, immer) {
      if (this[checked].length && this[checked].length < this.constant[constant].length) {
        this[immer] = true;
      } else {
        this[all] = this.constant[constant].length === this[checked].length;
        this[immer] = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.info-110 {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 11rem);
  overflow: hidden;
  .check-box {
    display: flex;
    /deep/.checkbox-group {
      text-align: left;
    }
    /deep/ .el-checkbox {
      margin-right: 6px;
    }
  }
  &__list {
    flex-shrink: 1;
    flex-grow: 1;
    margin-top: 10px;
    background-color: #fff;
    padding: 1.5rem 2rem;
  }
}
</style>
